<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计分析</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="css/common.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <!-- 状态栏 -->
    <div class="status-bar"></div>

    <!-- 导航栏 -->
    <div class="weapp-nav">
        <span>统计分析</span>
    </div>

    <!-- 主要内容区 -->
    <div class="weapp-container">
        <!-- 时间范围选择 -->
        <div class="flex items-center justify-between mb-4">
            <button class="weapp-button bg-gray-100 text-gray-700">
                本周
            </button>
            <button class="weapp-button bg-primary">
                本月
            </button>
            <button class="weapp-button bg-gray-100 text-gray-700">
                本年
            </button>
            <button class="weapp-button bg-gray-100 text-gray-700">
                <i class="fas fa-calendar-alt mr-1"></i>
                自定义
            </button>
        </div>

        <!-- 健康评分 -->
        <div class="weapp-card">
            <h2 class="text-lg font-semibold mb-4">健康评分</h2>
            <div class="flex items-center justify-between">
                <div class="text-center">
                    <div class="text-3xl font-bold text-primary mb-1">85</div>
                    <div class="text-sm text-gray-500">总体评分</div>
                </div>
                <div class="h-16 w-px bg-gray-200"></div>
                <div class="text-center">
                    <div class="text-xl font-semibold text-green-500 mb-1">优秀</div>
                    <div class="text-sm text-gray-500">健康状态</div>
                </div>
                <div class="h-16 w-px bg-gray-200"></div>
                <div class="text-center">
                    <div class="text-xl font-semibold text-blue-500 mb-1">28天</div>
                    <div class="text-sm text-gray-500">连续记录</div>
                </div>
            </div>
        </div>

        <!-- 便便类型统计 -->
        <div class="weapp-card">
            <h2 class="text-lg font-semibold mb-4">便便类型统计</h2>
            <canvas id="typeChart" height="200"></canvas>
        </div>

        <!-- 时间规律分析 -->
        <div class="weapp-card">
            <h2 class="text-lg font-semibold mb-4">时间规律分析</h2>
            <canvas id="timeChart" height="200"></canvas>
        </div>

        <!-- 健康建议 -->
        <div class="weapp-card">
            <h2 class="text-lg font-semibold mb-4">健康建议</h2>
            <div class="space-y-4">
                <div class="flex items-start">
                    <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                    <div>
                        <div class="font-medium">规律性良好</div>
                        <div class="text-sm text-gray-500">您的排便时间较为规律，建议继续保持</div>
                    </div>
                </div>
                <div class="flex items-start">
                    <i class="fas fa-exclamation-circle text-yellow-500 mt-1 mr-3"></i>
                    <div>
                        <div class="font-medium">饮水量偏低</div>
                        <div class="text-sm text-gray-500">建议增加每日饮水量至2000ml</div>
                    </div>
                </div>
                <div class="flex items-start">
                    <i class="fas fa-info-circle text-blue-500 mt-1 mr-3"></i>
                    <div>
                        <div class="font-medium">饮食建议</div>
                        <div class="text-sm text-gray-500">可以适当增加膳食纤维的摄入</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部标签栏 -->
    <div class="weapp-tabbar">
        <div class="weapp-tabbar-item">
            <i class="fas fa-home weapp-tabbar-icon"></i>
            <span>记录</span>
        </div>
        <div class="weapp-tabbar-item">
            <i class="fas fa-calendar-alt weapp-tabbar-icon"></i>
            <span>历史</span>
        </div>
        <div class="weapp-tabbar-item active">
            <i class="fas fa-chart-bar weapp-tabbar-icon"></i>
            <span>统计</span>
        </div>
        <div class="weapp-tabbar-item">
            <i class="fas fa-user weapp-tabbar-icon"></i>
            <span>我的</span>
        </div>
    </div>

    <script>
        // 便便类型统计图表
        const typeCtx = document.getElementById('typeChart').getContext('2d');
        new Chart(typeCtx, {
            type: 'doughnut',
            data: {
                labels: ['正常', '软便', '硬便', '其他'],
                datasets: [{
                    data: [65, 20, 10, 5],
                    backgroundColor: [
                        '#FCD34D',
                        '#34D399',
                        '#F87171',
                        '#A78BFA'
                    ]
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });

        // 时间规律分析图表
        const timeCtx = document.getElementById('timeChart').getContext('2d');
        new Chart(timeCtx, {
            type: 'bar',
            data: {
                labels: ['6-8点', '8-10点', '10-12点', '12-14点', '14-16点', '16-18点', '18-20点', '20-22点'],
                datasets: [{
                    label: '排便频率',
                    data: [8, 15, 5, 7, 3, 4, 6, 2],
                    backgroundColor: '#60A5FA'
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
</body>
</html> 